<template>
  <div class="app-container" :style="`background-image: url('${rootUrl}img/assets/gameStartBg.png?v=1')`">
    <!-- 游戏开始前的菜单 -->
    <div v-if="!gameStarted" class="menu">
      <h1>Game Start</h1>
      <div class="form-group">
        <label>Game preparation</label>
        <select v-model="difficulty">
          <option value="简单">Simple (40 cards)</option>
          <option value="普通">Regular (70 cards)</option>
          <option value="困难">Diffculty (100 cards)</option>
        </select>
      </div>
      <div class="form-group">
        <label>Select a level</label>
        <select v-model="level">
          <option v-for="i in maxLevel" :key="i" :value="i">
            {{ i }} level
          </option>
        </select>
      </div>
      <div class="form-group">
        <label>Select a mode</label>
        <select v-model="cardMode">
          <option value="10">10 card</option>
          <option value="12">12 card</option>
        </select>
      </div>
      <button @click="startGame">Start</button>
    </div>

    <!-- 游戏主界面 -->
    <div v-if="gameStarted" class="game-board">
      <div class="game-container">
        <!-- 左侧面板 -->
        <div class="left-panel">
          <div class="card-element base-card"
            :style="`background-image: url('${rootUrl}img/assets/card.png?v=1');background-size: cover;`">
            <div class="card-face">
              {{ baseCard }}
            </div>
          </div>
          <div class="discardimage"
            :style="`background-image: url('${rootUrl}img/assets/discardimage.png?v=1');background-size: cover;background-position: center center;`">
            <div ref="trashPile" class="trash-pile">
              <div class="trash-title">Abandoned</div>
              <div class="card-face trash-card">
                <span v-if="discardPile.length">
                  {{ displayCard(discardPile[discardPile.length - 1]) }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 中间面板 -->
        <div class="center-panel">
          <!-- 当前卡牌区域 -->
          <div ref="tempArea" class="temp-area">
            <div v-if="!discardAnimating" class="flip-card">
              <div class="flip-card-inner" :class="{ flipped: tempFlipped }">
                <div class="flip-card-front">
                  <div class="card-back-placeholder"
                    :style="`background-image: url('${rootUrl}img/assets/cardBg.jpg?v=1');background-size: cover;background-position: center center;`">
                  </div>
                </div>
                <div class="flip-card-back"
                  :style="`background-image: url('${rootUrl}img/assets/card.png?v=1');background-size: cover;background-position: center center;`">
                  <div class="card-face-content">
                    {{ displayCard(currentCard) }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 卡牌槽位区域 -->
          <div class="card-slots" :style="cardSlotsGridStyle">
            <div v-for="slot in cardSlots" :key="slot.index" :ref="'slot' + slot.index" class="card-slot"
              @click="handleSlotClick(slot.index)" :style="{ gridRow: slot.row + 1, gridColumn: slot.column + 1 }">
              <div class="flip-card" :class="{ invisible: !slot.dealt }">
                <div class="flip-card-inner" :class="{ flipped: slot.revealed }">
                  <div class="flip-card-front">
                    <div class="card-back-placeholder"
                      :style="`background-image: url('${rootUrl}img/assets/cardBg.jpg?v=1');background-size: cover;background-position: center center;`">
                    </div>
                  </div>
                  <div class="flip-card-back"
                    :style="`background-image: url('${rootUrl}img/assets/card.png?v=1');background-size: cover;background-position: center center;`">
                    <div class="card-face-content">
                      {{ displayCard(slot.card) }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="action-buttons">
            <button @click="onPlace"
              :disabled="!currentCard || mode === 'placing' || (currentCard && currentCard.type === 'trash')">
              Place
            </button>
            <button @click="discardCurrent" :disabled="!currentCard">
              Discard
            </button>
          </div>
        </div>

        <!-- 右侧面板 -->
        <div class="right-panel">
          <div ref="deck" class="card-element deck"
            :style="`background-image: url('${rootUrl}img/assets/cardBg.jpg?v=1');background-size: cover;`">
            <div class="card-face"></div>
            <div class="deck-count">cards：{{ deckCount }}</div>
          </div>
        </div>
      </div>

      <!-- 飞行卡牌动画 -->
      <div v-if="flyingCard" class="flying-card" :style="flyingCard.style">
        <div class="card-back-placeholder"></div>
      </div>

      <!-- 提示消息 -->
      <transition name="fade">
        <div v-if="popupMessage" class="popup-message">
          <div class="cloud" v-html="popupMessage"></div>
        </div>
      </transition>

      <!-- 游戏结束遮罩 -->
      <div v-if="gameOver" class="game-over-overlay"></div>

      <!-- 游戏结束面板 -->
      <div v-if="gameOver" class="game-over">
        <h2>Game {{ success ? "success" : "fail" }}！</h2>
        <p>Time：{{ elapsedTime }} s</p>
        <p>Remaining cards：{{ deckCount }} </p>
        <p>Total number of errors：{{ totalErrorCount }}</p>
        <div class="over-buttons">
          <button v-if="success && level < maxLevel" @click="nextLevel">
            Next level ({{ level + 1 }}level)
          </button>
          <button @click="restartLevel">Restart</button>
          <button @click="backToMenu">Back to menu</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MultiplicationGame",
  data() {
    return {
      gameStarted: false,
      gameOver: false,
      success: false,
      level: 1,
      maxLevel: 9,
      cardMode: "10",
      difficulty: "普通",
      deck: [],
      deckCount: 0,
      cardSlots: [],
      currentCard: null,
      discardPile: [],
      mode: "normal", // normal 或 placing
      errorCountForCurrentCard: 0,
      totalErrorCount: 0,
      baseCard: 1,
      gameStartTime: null,
      gameEndTime: null,
      popupMessage: "",
      flyingCard: null,
      tempFlipped: false,
      discardAnimating: false
    };
  },
  computed: {
    elapsedTime() {
      if (this.gameStartTime && this.gameEndTime) {
        return Math.floor((this.gameEndTime - this.gameStartTime) / 1000);
      }
      return 0;
    },
    // 添加新的计算属性来定义卡槽网格样式
    cardSlotsGridStyle() {
      // 根据卡槽数量确定每行的列数
      const columnsPerRow = this.cardSlots.length === 12 ? 6 : 5;

      // 根据列数调整最大宽度，确保卡片有足够的空间
      const maxWidth = this.cardSlots.length === 12 ? '950px' : '800px';

      return {
        'grid-template-columns': `repeat(${columnsPerRow}, 1fr)`,
        'grid-template-rows': 'repeat(2, 1fr)', // 明确指定两行
        'max-width': maxWidth
      };
    }
  },
  methods: {
    startGame() {
      this.gameStarted = true;
      this.gameOver = false;
      this.success = false;
      this.totalErrorCount = 0;
      this.errorCountForCurrentCard = 0;
      this.discardPile = [];
      this.popupMessage = "";
      this.baseCard = this.level;
      this.initDeck();
      this.deckCount = this.deck.length;
      this.cardSlots = [];
      this.gameStartTime = new Date();
      this.dealInitialCards();
    },

    initDeck() {
      // 根据难度确定卡牌总数
      let totalCards = 0;
      if (this.difficulty === "简单") {
        totalCards = 40;
      } else if (this.difficulty === "普通") {
        totalCards = 70;
      } else if (this.difficulty === "困难") {
        totalCards = 100;
      }

      // 预设的数字卡牌
      const presetNumbers = [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
        3, 6, 9, 12, 15, 18, 21, 24, 27, 30,
        3, 6, 9, 12, 15, 18, 21, 24, 27, 30
      ];

      // 计算垃圾牌数量
      let trashCardCount = 0;
      if (this.difficulty === "简单") {
        trashCardCount = Math.floor(totalCards * 0.05);
      } else if (this.difficulty === "普通") {
        trashCardCount = Math.floor(totalCards * 0.1);
      } else {
        trashCardCount = Math.floor(totalCards * 0.15);
      }

      // 计算数字牌数量
      const numberCardCount = totalCards - trashCardCount;

      // 生成数字牌
      let numbers = [];
      if (presetNumbers.length >= numberCardCount) {
        numbers = presetNumbers.slice(0, numberCardCount);
      } else {
        numbers = presetNumbers.slice();
        while (numbers.length < numberCardCount) {
          numbers.push(Math.floor(Math.random() * (15 * this.baseCard)) + 1);
        }
      }

      // 创建卡牌对象
      let cards = numbers.map(num => ({ type: "number", value: num }));

      // 添加垃圾牌
      for (let i = 0; i < trashCardCount; i++) {
        cards.push({ type: "trash" });
      }

      // 洗牌
      cards = this.shuffle(cards);
      this.deck = cards;
      this.deckCount = cards.length;
    },

    dealInitialCards() {
      const totalSlots = parseInt(this.cardMode);
      let dealtCount = 0;

      // 预先创建所有槽位，设置正确的位置信息
      const columnsPerRow = totalSlots === 12 ? 6 : 5;

      // 先创建所有槽位
      for (let i = 0; i < totalSlots; i++) {
        const row = Math.floor(i / columnsPerRow);
        const column = i % columnsPerRow;

        this.cardSlots.push({
          index: i + 1,
          card: null,
          revealed: false,
          dealt: false,
          row: row,
          column: column,
          // 计算槽位在DOM中的顺序
          order: row * columnsPerRow + column
        });
      }

      // 然后按顺序发牌
      const dealNextCard = () => {
        if (dealtCount >= totalSlots || this.deck.length === 0) {
          this.drawCard();
          return;
        }

        const card = this.deck.shift();
        this.deckCount = this.deck.length;

        // 找到当前要发牌的槽位（已经按照正确顺序创建）
        const slot = this.cardSlots[dealtCount];

        this.$nextTick(() => {
          const deckEl = this.$refs.deck;
          const slotEl = this.$refs['slot' + slot.index][0];

          if (deckEl && slotEl) {
            const deckRect = deckEl.getBoundingClientRect();
            const slotRect = slotEl.getBoundingClientRect();

            this.flyingCard = {
              style: {
                position: 'fixed',
                left: deckRect.left + 'px',
                top: deckRect.top + 'px',
                width: deckRect.width + 'px',
                height: deckRect.height + 'px',
                transition: 'all 0.5s ease-out',
                zIndex: 1000
              }
            };

            setTimeout(() => {
              this.flyingCard.style.left = slotRect.left + 'px';
              this.flyingCard.style.top = slotRect.top + 'px';
              this.flyingCard.style.width = slotRect.width + 'px';
              this.flyingCard.style.height = slotRect.height + 'px';
            }, 50);

            setTimeout(() => {
              slot.card = card;
              slot.dealt = true;
              this.flyingCard = null;
              dealtCount++;
              dealNextCard();
            }, 600);
          } else {
            slot.card = card;
            slot.dealt = true;
            dealtCount++;
            dealNextCard();
          }
        });
      };

      dealNextCard();
    },

    shuffle(array) {
      let currentIndex = array.length;
      let temporaryValue, randomIndex;

      while (currentIndex !== 0) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex--;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }

      return array;
    },

    drawCard() {
      if (this.deck.length === 0) {
        this.checkGameOver();
        return;
      }

      let card = this.deck.shift();
      this.deckCount = this.deck.length;
      this.currentCard = card;
      this.errorCountForCurrentCard = 0;
      this.mode = "normal";
      this.tempFlipped = false;

      setTimeout(() => {
        this.tempFlipped = true;
      }, 500);
    },

    onPlace() {
      if (!this.currentCard) return;

      if (this.currentCard.type !== 'trash') {
        this.mode = "placing";
      } else {
        this.showPopup("垃圾牌，请直接弃牌！");
      }
    },

    handleSlotClick(slotIndex) {
      if (this.mode !== "placing" || !this.currentCard) return;

      // 计算当前卡牌应该放在哪个槽位
      const targetSlotIndex = this.currentCard.value % this.baseCard === 0
        ? this.currentCard.value / this.baseCard
        : null;

      // 如果点击的槽位不正确
      if (targetSlotIndex !== slotIndex) {
        this.errorCountForCurrentCard++;
        this.totalErrorCount++;

        if (this.errorCountForCurrentCard === 1) {
          this.showPopup("再试一次");
        } else if (this.errorCountForCurrentCard === 2) {
          this.showPopup("最后一次机会");
        }

        // 三次错误后，丢弃当前卡牌
        if (this.errorCountForCurrentCard >= 3) {
          this.discardPile.push(this.currentCard);
          this.currentCard = null;
          this.mode = "normal";
          setTimeout(() => {
            this.drawCard();
          }, 1000);
        }
        return;
      }

      // 找到对应的槽位
      const slot = this.cardSlots.find(s => s.index === slotIndex);

      // 如果槽位已经被翻开，不能再放牌
      if (slot.revealed) {
        this.errorCountForCurrentCard++;
        this.totalErrorCount++;

        if (this.errorCountForCurrentCard === 1) {
          this.showPopup("再试一次");
        } else if (this.errorCountForCurrentCard === 2) {
          this.showPopup("最后一次机会");
        }

        if (this.errorCountForCurrentCard >= 3) {
          this.discardPile.push(this.currentCard);
          this.currentCard = null;
          this.mode = "normal";
          setTimeout(() => {
            this.drawCard();
          }, 1000);
        }
        return;
      }

      // 交换卡牌
      const oldCard = slot.card;
      slot.card = this.currentCard;
      slot.revealed = true;

      // 显示成功提示
      this.showPopup("<span class='checkmark'>√</span>");

      // 更新当前卡牌为槽位中的卡牌
      this.currentCard = oldCard;
      this.mode = "normal";
      this.errorCountForCurrentCard = 0;

      // 如果新的当前卡牌是垃圾牌，提示玩家
      if (this.currentCard && this.currentCard.type === 'trash') {
        this.showPopup("垃圾牌，请直接弃牌！");
      }

      // 检查是否所有槽位都已翻开
      if (this.cardSlots.every(s => s.revealed)) {
        this.gameEndTime = new Date();
        this.gameOver = true;
        this.success = true;
      } else if (this.currentCard && this.currentCard.type === 'trash') {
        // 如果当前卡牌是垃圾牌，自动弃牌
        setTimeout(() => {
          this.discardCurrent();
        }, 1000);
      }
    },

    discardCurrent() {
      if (!this.currentCard) return;

      this.discardAnimating = true;

      const tempAreaEl = this.$refs.tempArea;
      const trashPileEl = this.$refs.trashPile;

      if (tempAreaEl && trashPileEl) {
        const tempRect = tempAreaEl.getBoundingClientRect();
        const trashRect = trashPileEl.getBoundingClientRect();

        this.flyingCard = {
          style: {
            position: 'fixed',
            left: tempRect.left + 'px',
            top: tempRect.top + 'px',
            width: tempRect.width + 'px',
            height: tempRect.height + 'px',
            transition: 'all 0.5s ease-out',
            zIndex: 1000
          }
        };

        this.tempFlipped = false;

        setTimeout(() => {
          this.flyingCard.style.left = trashRect.left + 'px';
          this.flyingCard.style.top = trashRect.top + 'px';
          this.flyingCard.style.width = trashRect.width + 'px';
          this.flyingCard.style.height = trashRect.height + 'px';
        }, 50);

        setTimeout(() => {
          this.discardPile.push(this.currentCard);
          this.currentCard = null;
          this.flyingCard = null;
          this.discardAnimating = false;
          this.drawCard();
        }, 600);
      } else {
        this.discardPile.push(this.currentCard);
        this.currentCard = null;
        setTimeout(() => {
          this.drawCard();
        }, 800);
      }
    },

    checkGameOver() {
      // 如果还有未翻开的槽位，游戏失败
      if (this.cardSlots.some(slot => !slot.revealed)) {
        this.gameEndTime = new Date();
        this.gameOver = true;
      }
    },

    displayCard(card) {
      if (!card) return "";
      return card.type === "trash" ? "🗑️" : card.value;
    },

    nextLevel() {
      if (this.level < this.maxLevel) {
        this.level++;
        this.startGame();
      }
    },

    restartLevel() {
      this.startGame();
    },

    backToMenu() {
      this.gameStarted = false;
      this.gameOver = false;
      this.currentCard = null;
    },

    showPopup(message) {
      this.popupMessage = message;
      setTimeout(() => {
        this.popupMessage = "";
      }, 2000);
    }
  }
};
</script>

<style scoped>
.app-container {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: #fff;
  background-color: #7bdcf2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  padding: 20px;
}

.menu {
  max-width: 400px;
  margin: 50px auto;
  padding: 30px 20px;
  border: 2px solid #fff;
  border-radius: 15px;
  background: linear-gradient(135deg, #7bdcf2, #7bdcf2);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  text-align: center;
  font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

.menu h1 {
  font-size: 36px;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  margin-bottom: 25px;
}

.menu .form-group {
  margin: 20px 0;
}

.menu label {
  display: block;
  font-size: 20px;
  margin-bottom: 8px;
  color: #2c3e50;
}

.menu select {
  width: 100%;
  padding: 10px;
  font-size: 18px;
  border: 2px solid #000;
  border-radius: 10px;
  background: #fff;
  appearance: none;
  outline: none;
  cursor: pointer;
}

.menu button {
  padding: 12px 25px;
  font-size: 22px;
  background: #fff;
  border: none;
  border-radius: 10px;
  color: #000;
  cursor: pointer;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
  transition: background 0.3s, transform 0.2s;
  margin-top: 30px;
}

.menu button:hover {
  background: #ff0;
  transform: scale(1.05);
}

.game-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px;
}

.left-panel,
.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.left-panel {
  margin-left: -30px;
}

.right-panel {
  margin-right: -30px;
}

.center-panel {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.card-element {
  position: relative;
  width: 120px;
  height: 150px;
  border: 2px solid #b2bec3;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.base-card {
  /* background-color: #f09b49; */
  background-size: cover;
}

.deck {
  background-color: #34495e;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.deck-count {
  margin-top: 5px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 3px #000;
}

.temp-area {
  position: relative;
  width: 120px;
  height: 150px;
  border: 2px solid #b2bec3;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  /* background-color: #f09b49; */
  background-size: cover;
  overflow: hidden;
}

.flip-card {
  width: 100%;
  height: 100%;
}

.invisible {
  visibility: hidden;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card-inner.flipped {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.flip-card-front {
  background: linear-gradient(135deg, #34495e, #2c3e50);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-back-placeholder {
  width: 100%;
  height: 100%;
  /* background-color: #34495e; */
}

.flip-card-back {
  /* background-color: #f09b49; */
  background-size: cover;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: #ffd128;
  font-weight: bold;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

.card-face-content {
  padding: 5px 10px;
  border-radius: 5px;
}

.card-face {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: #ffd128;
  font-weight: bold;
}

.discardimage {
  margin-top: 230px;
  /* background-color: #ec9641; */
  background-size: cover;
  width: 180px;
  height: 180px;
  border-radius: 10px;
}

.trash-pile {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  position: relative;
  width: 180px;
  height: 180px;
  color: #ec9641;
  border-radius: 10px;
}

.trash-title {
  margin-bottom: 10px;
  font-size: 18px;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

.trash-card {
  font-size: 40px;
  margin-top: 10px;
}

.card-slots {
  display: grid;
  gap: 20px;
  width: 100%;
  margin: 0 auto;
  justify-items: center;
  align-items: center;
  grid-auto-flow: row;
  /* 确保按行优先填充 */
}

.card-slot {
  position: relative;
  width: 150px;
  height: 200px;
  perspective: 1000px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.action-buttons button {
  padding: 12px 25px;
  width: 150px;
  height: 80px;
  font-size: 22px;
  background-color: #7bdcf2;
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, background 0.3s;
}

.action-buttons button:hover {
  background: linear-gradient(45deg, #f09b49, #f09b49);
  transform: scale(1.05);
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

button:disabled:hover {
  background-color: #ccc;
  transform: none;
}

.flying-card {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  /* background-color: #34495e; */
  background-image: url('/img/assets/cardBg.jpg');
  background-size: cover;
}

.popup-message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  animation: popup-animation 0.5s ease-out;
}

@keyframes popup-animation {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.5);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

.cloud {
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 50px;
  padding: 20px 40px;
  font-size: 22px;
  font-weight: bold;
  color: #ffd128;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  position: relative;
}

.cloud:after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 20px;
  background: #fff;
  border: 2px solid #ccc;
  border-top: none;
  border-radius: 0 0 50px 50px;
}

.checkmark {
  color: green;
  font-size: 30px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.game-over {
  text-align: center;
  background: #ffeaa7;
  border: 2px solid #fdcb6e;
  border-radius: 10px;
  padding: 15px;
  width: 90%;
  max-width: 400px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.game-over-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.over-buttons button {
  margin: 5px;
  padding: 10px 15px;
  font-size: 16px;
  background-color: #7bdcf2;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.over-buttons button:hover {
  background: #f09b49;
  transform: scale(1.05);
}
</style>